<template>
  <!-- 在vue项目中使用腾讯地图 -->

  <div class="look-box">
    <div class="left">
      <div
        class="left-item"
        v-for="(item,index) in list"
        :key="index"
        :class="{'on-left-item': current == index}"
        @click="changeItem(item, index)"
      >
        <img :src="item.work_img" alt="">
        <!-- <el-avatar size="medium" :src="item.work_img"></el-avatar> -->
        <div class="info">
          <span>{{ item.coach_name }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <el-form
      :model="form"
      ref="ruleForm"
      class="form"
      size="small"
    >
      <el-form-item>
        <tx-map v-bind:listData="listData" v-bind:listDataStyle="listDataStyle" ref="map" @setAddress="setAddress" />
      </el-form-item>
    </el-form>
    </div>

  </div>
</template>

<script>
import TxMap from "@/components/map"; //腾讯地图
export default {
  components: { TxMap },
  data() {
    return {
      form: {
        store_address: "广东省广州市天河区信源大厦",
        prov_name: "",
        city_name: "",
        district_name: "",
        latitude: "",
        longitude: "",
      },
      list: [],
      current: 0,
      listData: [],
      listDataStyle: {}
    };
  },
   created() {

  },
   mounted() {
    this.getCoachList()

    this.$nextTick(() => {
      setTimeout(() => {
        this.addressChange(15);
      }, 500)
    })
  },
  methods: {
    changeItem(item, index){
      this.current = index
      this.$refs["map"].setCenter(
        this.listData[index].position.lat,
        this.listData[index].position.lng
      );
    },
    load () {
      this.count += 2
    },
    // 获取助教列表
     getCoachList() {
      this.$api.technician.coachList({
        page: 1,
        limit: 10000,
        status: 2,
        auth_status: 0
      }).then((response) => {
        this.list = response.data.data
        response.data.data.map((item) => {
          let items = {
            "id":'map'+item.id,
            "styleId": 'map'+item.id,
            "position": new TMap.LatLng(Number(item.lat), Number(item.lng)),
            "properties": {
              "coach_name": item.coach_name,
              "address": item.address,
              "work_img": item.work_img,
              "lat": item.lat,
              "lng": item.lng
            }
          }
          this.listDataStyle['map'+item.id] = new TMap.MarkerStyle({
            "width": 50,
            "height": 50,
            "src": item.work_img,
            "anchor": { x: 12, y: 32 }
          })
          this.listData.push(items)
        })
      })
    },
    //更新地点
    setAddress(newAddress) {
      this.form.store_address = newAddress.formatted_addresses.recommend; //地址
      this.form.latitude = newAddress.location.lat; //纬度
      this.form.longitude = newAddress.location.lng; //经度
      this.form.prov_name = newAddress.address_component.province; //省
      this.form.city_name = newAddress.address_component.city; //市
      this.form.district_name = newAddress.address_component.district; //区
      this.form = Object.assign({}, this.form, {
        store_address: newAddress.formatted_addresses.recommend,
      });
      console.log("this.form.store_address", this.form.store_address);
    },

    // 地址搜索事件
    addressChange(zoom = 15) {
      let map_key = "5PLBZ-KIZC6-NCKSH-MOPXS-QP6OK-M4BIO"; //腾讯地图key
      //省市区
      let prov_name = this.form.prov_name || "",
        city_name = this.form.city_name || "",
        district_name = this.form.district_name || "";
      //如果有省市区的选择，地图搜索就要把省市区组装起来，传入到address参数里
      let store_city = prov_name + city_name + district_name;

      // 地址转坐标
      this.$jsonp(
        `https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=${map_key}&address=${store_city}${this.form.store_address}`
      ).then((res) => {
        // 根据点击地点获取经纬度
        let lat = res.result.location.lat; //纬度
        let lng = res.result.location.lng; //经度
        //在地图上定位地点
        this.$refs["map"].init(
          zoom,
          lat,
          lng,
          this.form.store_address
        );
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.look-box{
  padding: 20px;
  display: flex;
  flex-direction: row;
}
::-webkit-scrollbar {
        display: none;
      }
.left {
  // flex-grow: 1;
  width: 20%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px - 92px);
  overflow: auto;
  .left-item{
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: solid 1px #eee;
    cursor: pointer;
    border-left: solid 1px #eee;
    user-select: none;
    img{
      border-radius: 50%;
      width: 50px;
      height: 50px;
    }
    .info {
      margin-left: 10px;
    }
  }
  .on-left-item {
    background-color: #eee;
  }
}
.right{
  // flex-grow: 8;
  width: 80%;
}
</style>
